<template>
  <div class="xcx_home_config">
    <div class="flex main">
      <div class="flex-1 left">
        <div class="m-auto model_wrap">
          <template v-for="(item, index) in sectionList">
            <div
              class="section_wrap"
              :key="index"
              :class="{'active':index+1==activeNum}"
              @click="activeNum=index+1"
            >
              <img
                class="block w-100"
                :src="require('../../../assets/images/xcx/'+item.imgName)"
                :alt="item.title"
              >
              <div
                v-show="!item.show"
                class="flex flex-center w-100 h-100 hide_div"
              >已隐藏</div>
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="flex flex-between-center header">
          <h5 class="color-666 normal-font">{{sectionList[activeNum-1].title}}</h5>
          <div>
            <el-switch
              v-model="sectionList[activeNum-1].show"
              active-color="#4ccb86"
              inactive-color="#ff4146"
            ></el-switch>
            <span
              class="v-middle"
              style="margin-left:10px"
            >{{sectionList[activeNum-1].show?"开启":"隐藏"}}</span>
          </div>
        </div>
        <div class="main_form">
          <top-banner
            v-if="activeNum==1"
            ref="topBanner"
          ></top-banner>
          <nine-grid
            v-if="activeNum==2"
            ref="nineGrid"
          ></nine-grid>
          <capsule-banner
            v-if="activeNum==3"
            ref="capsuleBanner"
          ></capsule-banner>
          <third-hot
            v-if="activeNum==4"
            ref="thirdHot"
          ></third-hot>
          <banner-col
            v-if="activeNum==5"
            ref="bannerCol"
          ></banner-col>
          <two-col-goods
            v-if="activeNum==6"
            ref="twoColGoods"
          ></two-col-goods>
          <sec-banner
            v-if="activeNum==7"
            ref="secBanner"
          ></sec-banner>
          <two-activity
            v-if="activeNum==8"
            ref="twoActivity"
          ></two-activity>
          <category
            v-if="activeNum==9"
            ref="category"
          ></category>
        </div>
        <div class="text-center footer">
          <el-button
            style="width:200px"
            size="small"
            type="primary"
            @click="save"
          >保存</el-button>
        </div>
      </div>
    </div>
    <div class="fix-footer-btns">
      <el-button
        v-if="$hasMethod('#preview')"
        size="small"
        @click="preview"
      >预览</el-button>
      <el-button
        v-if="$hasMethod('#publish')"
        size="small"
        type="primary"
        @click="release"
      >发布</el-button>
    </div>
  </div>
</template>
<script>
import topBanner from "./child/topBanner";
import nineGrid from "./child/nineGrid";
import capsuleBanner from "./child/capsuleBanner";
import thirdHot from "./child/thirdHot";
import bannerCol from "./child/bannerCol";
import twoColGoods from "./child/twoColGoods";
import secBanner from "./child/secBanner";
import twoActivity from "./child/twoActivity";
import category from "./child/category";
import { checkUrl } from '@/utils/validate';
import { saveParams, getParamsByType, releaseOnline, previewIndex } from "@/api/xcx";
export default {
  components: { topBanner, capsuleBanner, nineGrid, thirdHot, bannerCol, twoColGoods, secBanner, twoActivity, category },
  data() {
    return {
      activeNum: 1,
      sectionList: [
        {
          title: "首页轮播图片",
          show: true,
          imgName: '1.jpg'
        },
        {
          title: "九宫格",
          show: true,
          imgName: '2.jpg'
        },
        {
          title: "胶囊轮播图",
          show: true,
          imgName: '3.jpg'
        },
        {
          title: "三栏式热门",
          show: true,
          imgName: '4.jpg'
        },
        {
          title: "轮播图+二栏式",
          show: true,
          imgName: '5.jpg'
        },
        {
          title: "二栏式*2商品",
          show: true,
          imgName: '6.jpg'
        },
        {
          title: "次级轮播图",
          show: true,
          imgName: '7.jpg'
        },
        {
          title: "二栏式活动",
          show: true,
          imgName: '8.jpg'
        },
        {
          title: "品类商品推荐",
          show: true,
          imgName: '9.jpg'
        }
      ]
    }
  },
  watch: {
    activeNum(val) {
      this.getParams(val);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      previewIndex().then(res => {
        const showTypes = res.map(k => k.type);
        this.sectionList.forEach((item, index) => {
          const num = index + 1;
          if (showTypes.indexOf(num) === -1) {
            item.show = false;
          }
        })
        this.getParams(1);
      })
    },
    preview() {
      this.$router.push({ name: "xcxPosPreview" });
    },
    release() {
      releaseOnline().then(res => { });
    },
    getParams(type) {
      getParamsByType(type).then(res => {
        if (res) {
          this.sectionList[this.activeNum - 1].show = res.status == 2;
          const data = JSON.parse(res.params);
          this.$nextTick(() => {
            type == 1 && (this.$refs.topBanner.bannerList = [...data]);
            type == 2 && (this.$refs.nineGrid.iconList = [...data]);
            type == 3 && (this.$refs.capsuleBanner.banner = data[0]);
            type == 4 && (this.$refs.thirdHot.configData = data.main, this.$refs.thirdHot.$refs.colForm.goodsList = data.goods);
            if (type == 5) {
              this.$refs.bannerCol.carousel = data.carousel;
              this.$refs.bannerCol.configData = [
                data.twoBar.one.main,
                data.twoBar.two.main
              ]
              this.$refs.bannerCol.$refs.colForm1.goods = data.twoBar.one.goods;
              this.$refs.bannerCol.$refs.colForm2.goods = data.twoBar.two.goods;
            }
            if (type == 6) {
              this.$refs.twoColGoods.configData = [
                data.one.main,
                data.two.main
              ]
              this.$refs.twoColGoods.$refs.colForm1.goodsList = data.one.goods;
              this.$refs.twoColGoods.$refs.colForm2.goodsList = data.two.goods;
            }
            type == 7 && (this.$refs.secBanner.bannerList = [...data]);
            type == 8 && (this.$refs.twoActivity.imgList = [...data]);
            type == 9 && (this.$refs.category.dataList = [...data]);
          })
        }
      })
    },
    // 保存顶部导航栏
    saveTopBanner() {
      const list = [...this.$refs.topBanner.bannerList];
      if (this.validateBannerList(list)) {
        saveParams({ type: 1, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(1);
        })
      }
    },
    // 保存胶囊轮播图
    saveCapsuleBanner() {
      const list = [this.$refs.capsuleBanner.banner];
      if (this.validateBannerList(list)) {
        saveParams({ type: 3, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(3);
        })
      }
    },
    validateIcon(list) {
      for (let index in list) {
        const num = parseInt(index) + 1;
        if (!list[index].img) {
          this.$message({
            message: `图标${num}的图片不能为空`,
            type: "error"
          });
          return false;
        }
        if (!list[index].title) {
          this.$message({
            message: `图标${num}的名称不能为空`,
            type: "error"
          });
          return false;
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: `图标${num}的链接不能为空`,
            type: "error"
          });
          return false;
        }
        // if (!checkUrl(list[index].jumpUrl)) {
        //   this.$message({
        //     message: `图标${num}的链接格式不正确`,
        //     type: "error"
        //   });
        //   return false;
        // }
      }
      return true;
    },
    // 保存九宫格
    saveNineGrid() {
      const list = [...this.$refs.nineGrid.iconList];
      if (this.validateIcon(list)) {
        saveParams({ type: 2, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(2);
        })
      }
    },
    // 校验三栏式热门
    validateThirdHot({ main, goods }) {
      const { backgroundImg, title, subtitle, jumpUrl } = main;
      if (!backgroundImg) {
        this.$message({
          message: "请上传背景图",
          type: "warning"
        });
        return false
      }
      if (!title) {
        this.$message({
          message: "主标题不能为空！",
          type: "error"
        });
        return false
      }
      if (!subtitle) {
        this.$message({
          message: "副标题不能为空！",
          type: "error"
        });
        return false
      }
      if (!jumpUrl) {
        this.$message({
          message: "链接不能为空！",
          type: "error"
        });
        return false
      }
      // if (!checkUrl(jumpUrl)) {
      //   this.$message({
      //     message: "链接格式不正确",
      //     type: "error"
      //   });
      //   return false;
      // }
      if (goods.length < 3) {
        this.$message({
          message: "添加商品个数不能少于3个！",
          type: "error"
        });
        return false
      }
      return true
    },
    // 保存三栏式热门
    saveThirdHot() {
      const params = { main: this.$refs.thirdHot.configData, goods: this.$refs.thirdHot.$refs.colForm.goodsList };
      if (this.validateThirdHot(params)) {
        saveParams({ type: 4, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
          this.getParams(4);
        })
      }
    },
    // 校验轮播图+二栏式
    validateBannerCol({ carousel, twoBar }) {
      if (carousel.length === 0) {
        this.$message({
          message: "请添加轮播图",
          type: "warning"
        });
        return false
      }
      for (let index = 0; index < carousel.length; index++) {
        const num = index + 1;
        if (!carousel[index].img) {
          this.$message({
            message: "请添加轮播图" + num + "的图片",
            type: "warning"
          });
          return false
        }
        if (!carousel[index].jumpUrl) {
          this.$message({
            message: "请添加轮播图" + num + "的链接",
            type: "warning"
          });
          return false
        }
      }
      if (!twoBar.one.main.backgroundImg) {
        this.$message({
          message: "请添加二栏式1的背景图",
          type: "warning"
        });
        return false
      }
      if (!twoBar.one.main.title) {
        this.$message({
          message: "请输入二栏式1的主标题",
          type: "warning"
        });
        return false
      }
      if (!twoBar.one.main.subtitle) {
        this.$message({
          message: "请输入二栏式1的副标题",
          type: "warning"
        });
        return false
      }
      if (!twoBar.one.main.jumpUrl) {
        this.$message({
          message: "请输入二栏式1的链接",
          type: "warning"
        });
        return false
      }
      // if (!checkUrl(twoBar.one.main.jumpUrl)) {
      //   this.$message({
      //     message: "二栏式1的链接格式不正确",
      //     type: "error"
      //   });
      //   return false;
      // }
      for (let item of twoBar.one.goods) {
        if (!item.imgurl) {
          this.$message({
            message: "请添加二栏式1的图片",
            type: "warning"
          });
          return false
        }
      }
      if (!twoBar.two.main.backgroundImg) {
        this.$message({
          message: "请添加二栏式2的背景图",
          type: "warning"
        });
        return false
      }
      if (!twoBar.two.main.title) {
        this.$message({
          message: "请输入二栏式2的主标题",
          type: "warning"
        });
        return false
      }
      if (!twoBar.two.main.subtitle) {
        this.$message({
          message: "请输入二栏式2的副标题",
          type: "warning"
        });
        return false
      }
      if (!twoBar.two.main.jumpUrl) {
        this.$message({
          message: "请输入二栏式2的链接",
          type: "warning"
        });
        return false
      }
      // if (!checkUrl(twoBar.two.main.jumpUrl)) {
      //   this.$message({
      //     message: "二栏式2的链接格式不正确",
      //     type: "error"
      //   });
      //   return false;
      // }
      for (let item of twoBar.two.goods) {
        if (!item.imgurl) {
          this.$message({
            message: "请添加二栏式2的图片",
            type: "warning"
          });
          return false
        }
      }
      return true
    },
    // 保存轮播图+二栏式
    saveBannerCol() {
      const { carousel, configData } = this.$refs.bannerCol;
      const goods1 = this.$refs.bannerCol.$refs.colForm1.goods;
      const goods2 = this.$refs.bannerCol.$refs.colForm2.goods;
      const params = {
        carousel: carousel,
        twoBar: {
          one: {
            main: configData[0],
            goods: goods1
          },
          two: {
            main: configData[1],
            goods: goods2
          }
        }
      };
      if (this.validateBannerCol(params)) {
        saveParams({ type: 5, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
          this.getParams(5);
        })
      }
    },
    // 校验二栏式*2商品
    validateTwoColGoods({ one, two }) {
      if (!one.main.backgroundImg) {
        this.$message({
          message: "请添加二栏式1的背景图",
          type: "warning"
        });
        return false
      }
      if (!one.main.title) {
        this.$message({
          message: "请输入二栏式1的主标题",
          type: "warning"
        });
        return false
      }
      if (!one.main.subtitle) {
        this.$message({
          message: "请输入二栏式1的副标题",
          type: "warning"
        });
        return false
      }
      if (!one.main.jumpUrl) {
        this.$message({
          message: "请输入二栏式1的链接",
          type: "warning"
        });
        return false
      }
      // if (!checkUrl(one.main.jumpUrl)) {
      //   this.$message({
      //     message: "二栏式1的链接格式不正确",
      //     type: "error"
      //   });
      //   return false;
      // }
      if (one.goods.length < 2) {
        this.$message({
          message: "请添加二栏式1的商品",
          type: "warning"
        });
        return false
      }
      if (!two.main.backgroundImg) {
        this.$message({
          message: "请添加二栏式2的背景图",
          type: "warning"
        });
        return false
      }
      if (!two.main.title) {
        this.$message({
          message: "请输入二栏式2的主标题",
          type: "warning"
        });
        return false
      }
      if (!two.main.subtitle) {
        this.$message({
          message: "请输入二栏式2的副标题",
          type: "warning"
        });
        return false
      }
      if (!two.main.jumpUrl) {
        this.$message({
          message: "请输入二栏式2的链接",
          type: "warning"
        });
        return false
      }
      // if (!checkUrl(two.main.jumpUrl)) {
      //   this.$message({
      //     message: "二栏式2的链接格式不正确",
      //     type: "error"
      //   });
      //   return false;
      // }
      if (two.goods.length < 2) {
        this.$message({
          message: "请添加二栏式2的商品",
          type: "warning"
        });
        return false
      }
      return true
    },
    // 保存二栏式*2商品
    saveTwoColGoods() {
      const { configData } = this.$refs.twoColGoods;
      const goods1 = this.$refs.twoColGoods.$refs.colForm1.goodsList;
      const goods2 = this.$refs.twoColGoods.$refs.colForm2.goodsList;
      const params = {
        one: {
          main: configData[0],
          goods: goods1
        },
        two: {
          main: configData[1],
          goods: goods2
        }
      }
      if (this.validateTwoColGoods(params)) {
        saveParams({ type: 6, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(params) }).then(res => {
          this.getParams(6);
        })
      }
    },
    // 校验轮播图列表
    validateBannerList(list) {
      if (list.length === 0) {
        this.$message({
          message: "请添加轮播图",
          type: "warning"
        });
        return false
      }
      for (let index = 0; index < list.length; index++) {
        const num = index + 1;
        if (!list[index].img) {
          this.$message({
            message: "请添加轮播图" + num + "的图片",
            type: "warning"
          });
          return false
        }
        if (!list[index].jumpUrl) {
          this.$message({
            message: "请添加轮播图" + num + "的链接",
            type: "warning"
          });
          return false
        }
      }
      return true
    },
    // 保存次级轮播图
    saveSecBanner() {
      const list = [...this.$refs.secBanner.bannerList];
      if (this.validateBannerList(list)) {
        saveParams({ type: 7, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(list) }).then(res => {
          this.getParams(7);
        })
      }
    },
    // 保存二栏式活动
    saveTwoActivity() {
      const { imgList } = this.$refs.twoActivity;
      for (let index = 0; index < imgList.length; index++) {
        const num = index + 1;
        if (!imgList[index].img) {
          this.$message({
            message: "请添加图片" + num + "的图片",
            type: "warning"
          });
          return false
        }
        if (!imgList[index].jumpUrl) {
          this.$message({
            message: "请添加图片" + num + "的链接",
            type: "warning"
          });
          return false
        }
        // if (!checkUrl(imgList[index].jumpUrl)) {
        //   this.$message({
        //     message: `图片${num}的链接格式不正确`,
        //     type: "error"
        //   });
        //   return false;
        // }
      }
      saveParams({ type: 8, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(imgList) }).then(res => {
        this.getParams(8);
      })
    },
    // 校验品类商品推荐
    validateCategory(list) {
      for (let index = 0; index < list.length; index++) {
        const num = index + 1;
        if (!list[index].main.title) {
          this.$message({
            message: "请添加推荐位" + num + "的主标题",
            type: "warning"
          });
          return false
        }
        if (!list[index].main.img) {
          this.$message({
            message: "请添加推荐位" + num + "的一级推荐商品图片",
            type: "warning"
          });
          return false
        }
        if (!list[index].main.jumpUrl) {
          this.$message({
            message: "请添加推荐位" + num + "的一级推荐商品链接",
            type: "warning"
          });
          return false
        }
        if (list[index].goods.length < 3) {
          this.$message({
            message: "请添加推荐位" + num + "的二级推荐商品",
            type: "warning"
          });
          return false
        }
      }
      return true
    },
    // 保存品类商品推荐
    saveCategory() {
      const { dataList } = this.$refs.category;
      if (this.validateCategory(dataList)) {
        saveParams({ type: 9, status: this.sectionList[this.activeNum - 1].show ? 2 : 1, params: JSON.stringify(dataList) }).then(res => {
          this.getParams(9);
        })
      }
    },
    save() {
      switch (this.activeNum) {
        case 1:
          this.saveTopBanner();
          break;
        case 2:
          this.saveNineGrid();
          break;
        case 3:
          this.saveCapsuleBanner();
          break;
        case 4:
          this.saveThirdHot();
          break;
        case 5:
          this.saveBannerCol();
          break;
        case 6:
          this.saveTwoColGoods();
          break;
        case 7:
          this.saveSecBanner();
          break;
        case 8:
          this.saveTwoActivity();
          break;
        case 9:
          this.saveCategory();
          break;

        default:
          break;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.xcx_home_config {
  padding: 0;
}
.main {
  height: 73vh;
}
.left {
  padding: 30px;
  background-color: #f5f5f5;
  overflow: auto;
}
.right {
  width: 420px;
  overflow-y: auto;
  .header {
    padding: 15px;
    border-bottom: 1px solid #eeeeee;
  }
  .footer {
    padding: 15px 0;
    border-top: 1px solid #eeeeee;
  }
}
.model_wrap {
  width: 375px;
  & > div.active {
    border: 1px solid $mainBlue;
  }
}
.main_form {
  padding: 15px 20px;
}
.section_wrap {
  position: relative;
}
.hide_div {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  background: #000000;
  opacity: 0.5;
  font-size: 32px;
}
</style>
